<template>
<wux-spin nested :spinning="spinning">
  <div class="root">
      <wux-toptips id="wux-toptips" />
      <div class="root_son">
        <div class="user-info">
          <wux-spin nested :spinning="contentSpinning">
            <wux-card title="我的信息">
              <div slot="body">
                <div class="user-info-content">
                  <span class="title">姓名</span>
                  <span class="value">{{lease.realName}}</span>
                </div>
                <div class="user-info-content">
                  <span class="title">电话</span>
                  <span class="value">{{lease.phone}}</span>
                </div>
                <div class="user-info-content" v-if="lease.roomNum">
                  <span class="title">房间号</span>
                  <span class="value">{{lease.roomNum}}</span>
                </div>
              </div>
            </wux-card>
          </wux-spin>
        </div>
        <div class="orders_outer">
          <wux-card :title="lease.shopTitle">
            <div slot="body">
              <div class="orders_list">
                <div class="icon_img">
                  <img
                    class="img"
                    :src="(lease.img === undefined || lease.img === '')? '../../../static/images/unknown.png' : lease.img"
                  />
                </div>
                <div class="name_describe">
                  <p class="name_describe_title">{{lease.title}}</p>
                  <span>租赁数量：{{lease.amount}}</span>
                </div>
                <div class="lease-price">
                  <span>押金</span>
                  <span class="val">￥ {{lease.price}}</span>
                </div>
              </div>
            </div>
            <view slot="footer">
              <div class="discript">租赁时间：{{lease.createTime}}</div>
            </view>
          </wux-card>
        </div>
        <div class="lease-info">
          <wux-card title="租用说明">
            <div slot="body">
              <div class="lease-title">
                免费时长：
                <span class="val">{{lease.freeCount}}</span>{{lease.cycleVal}}
              </div>
              <!-- <div class="lease-title">
                租赁费用：
                <span class="val">{{lease.serviceCharge}}</span>
                元
              </div> -->
              <div class="lease-title">
                租赁费用：
                <span class="val">{{lease.timeoutPay}}</span>
                元 / {{lease.cycleVal}}
              </div>
              <div class="lease-title">
                买断时长：
                <span class="val">{{lease.timeoutBuyout}}</span>
                {{lease.cycleVal}}
              </div>
              <div class="lease-title">
                买断金额：
                <span class="val">{{lease.buyoutPrice}}</span>元
              </div>
              <!-- <ul class="lease-ui">
                <li>1、不足1 {{lease.cycleVal}}按1 {{lease.cycleVal}}收取</li>
                <li>2、租赁费将在退还押金时自动扣除</li>
                <li>3、酒店退房时未归还租赁商品的将不再退还商品押金</li>
              </ul> -->
            </div>
            <div slot="footer">
              <div class="discript">门店地址：{{lease.address}}</div>
              <div class="discript">门店联系方式：{{lease.tel}}</div>
            </div>
          </wux-card>
        </div>
      </div>
      <div class="settlement">
        <div class="total" v-if="lease.step === '0' || lease.step === '1'">
          <div class="price_div">
            <span class="price_title">需支付</span>
            <span class="dollars">￥</span>
            <span class="money">{{lease.payTimeoutPrice}}</span>
          </div>
          <div class="settlement_btn" v-on:click="onPay()">
            <span>归还结算</span>
          </div>
        </div>
        <div class="pay-back" v-else-if="lease.step === '2' ">归还申请中</div>
        <div class="end" v-else>订单完成</div>
      </div>
  </div>
</wux-spin>
</template>

<script>
import { payForBorrow } from "@/api/pay";

import transactionApi from "@/api/transaction";

import { $wuxToptips } from "../../static/wux/index";

export default {
  data() {
    return {
      lease: {},
      contentSpinning: false,
      spanning: false
    };
  },
  computed: {
    submitGoods() {
      return this.$store.state.submitGoods;
    },
    shop() {
      return this.$store.state.shop;
    },
    user() {
      return this.$store.state.user;
    },
    spinning() {
      return this.$store.state.paySpinning;
    }
  },
  mounted() {
    this.getLease();
  },
  methods: {
    payForBorrow,
    onPay() {
      this.$store.dispatch("setPaySpinning", true);
      var body = {
        orderId: this.lease.orderId,
        payTimeoutPrice: this.lease.payTimeoutPrice
      }
      this.$store.dispatch("saveBorrow", body);
      this.payForBorrow();
    },
    getLease() {
      let self = this;
      if (JSON.stringify(this.$store.state.user) === "{}") {
        wx.showModal({
          title: "提示",
          content: "请先登录",
          success: function (res) {
            if (res.confirm) {
              wx.redirectTo({
                url: "/pages/login"
              });
            }
          }
        });
        return false;
      }
      this.contentSpinning = true;
      this.$http
        .post({
          url: transactionApi.getTransactionLease,
          method: "POST",
          body: {
            openId: self.$store.state.user.openId,
            orderId: self.$store.state.orderId
          }
        })
        .then(res => {
          self.lease = res;
          self.contentSpinning = false;
        })
        .then(res => {
          self.contentSpinning = false;
        });
    }
  }
};
</script>


<style scoped lang="less">
.root {
  height: 100vh;
  overflow-y: auto;
  background: #f3f3f3;
  .root_son {
    padding: 10px 0 60px 0;
    .orders_outer {
      padding: 0 10px;
      .orders_title {
        background: #fff;
        padding: 15px;
        font-size: 15px;
        border-bottom: 1px solid #f3f3f3;
        .create-time {
          font-size: 12px;
          color: #999999;
          float: right;
        }
      }
      .orders_list {
        background: #fff;
        overflow: hidden;
        border-radius: 5px;
        display: flex;
        position: relative;
        box-sizing: border-box;
        .icon_img {
          width: 80px;
          height: 80px;
          flex: 0.5;
          padding: 3px;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .name_describe {
          padding: 10px;
          flex: 1;
          .name_describe_title {
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2; /*要显示的行数*/
            -webkit-box-orient: vertical;
          }
          p {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2; // 2行
            word-break: break-all; // 换行
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
          span {
            font-size: 12px;
          }
        }
        .price {
          flex: 0.5;
          line-height: 80px;
          text-align: center;
          color: #c89f62;
        }
        .lease-price {
          flex: 0.6;
          line-height: 80px;
          text-align: center;
          font-size: 15px;

          .val {
            padding-left: 10px;
            color: #c89f62;
          }
        }
      }
      &:after {
        content: " ";
        position: absolute;
        height: 1px;
        background-color: #efefef;
        bottom: 0;
        left: 0;
        width: 100%;
      }
    }
    .discript {
      font-size: 14px;
      margin: 10px 0;
    }
    .lease-info {
      margin: 10px;
      font-size: 13px;
      .lease-title {
        font-size: 14px;
        .val {
          color: #c89f62;
        }
      }
      .lease-ui {
        padding: 5px;
      }
    }
    .user-info {
      margin: 10px;
      .user-info-content {
        margin: 5px 0;
        .title {
          color: #999;
          font-size: 14px;
        }
        .value {
          font-size: 16px;
          float: right;
        }
      }
    }
  }
  .settlement {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    z-index: 100;
    .select_all {
      padding: 25px 0 0 15px;
    }
    .float_left {
      float: left;
    }
    .float_right {
      float: right;
    }
    .total {
      width: 100%;
      padding-top: 10px;
      overflow: hidden;
      .price_div {
        .price_title {
          padding: 0 5px;
        }
        float: left;
        margin-left: 10px;
        padding-top: 5px;
        .count_span {
          color: #bababa;
          font-size: 14px;
          margin-right: 5px;
        }
        .dollars {
          font-size: 12px;
          color: #c89f62;
        }
        .money {
          color: #c89f62;
          font-size: 20px;
        }
      }
      .settlement_btn {
        margin-right: 10px;
        display: block;
        padding: 10px 10px;
        background: #fe5913;
        color: #fff;
        border-radius: 10px;
        float: right;
      }
    }
    .pay-back {
      color: rgb(252, 230, 39);
      text-align: center;
      font-size: 18px;
      line-height: 60px;
    }
    .end {
      color: #0ed00e;
      text-align: center;
      font-size: 18px;
      line-height: 60px;
    }
  }
}
</style>